<template>
    <div class="addgoods">
        <el-card >
            <!-- 提示信息 -->
             <el-alert
                title="消息提示的文案"
                type="info"
                show-icon
                :closable="false"
                 center>
             </el-alert>
             <!-- 进度条 -->
             <el-steps :space="200" :active="active"  align-center finish-status="success">
                    <el-step title="基本信息"></el-step>
                    <el-step title="商品参数"></el-step>
                    <el-step title="商品属性"></el-step>
                    <el-step title="商品图片"></el-step>
                    <el-step title="商品内容"></el-step>
                    <el-step title="完成"></el-step>
            </el-steps>
            <!-- 切换 -->

                   <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-tabs :tab-position="tabPosition" style="height: 400px;" :before-leave='handleClick'>
                <el-tab-pane label="基本信息">
                 <!-- 基本信息表单 -->
                       <el-form-item label="商品名称" prop="goods_name">
                          <el-input v-model="ruleForm.goods_name"></el-input>
                       </el-form-item>
                        <el-form-item label="商品价格" prop="goods_price">
                          <el-input v-model="ruleForm.goods_price" type="number"></el-input>
                       </el-form-item>
                        <el-form-item label="商品重量" prop="goods_weight">
                          <el-input v-model="ruleForm.goods_weight" type="number"></el-input>
                       </el-form-item>
                       <el-form-item label="商品数量" prop="goods_number">
                          <el-input v-model="ruleForm.goods_number" type="number"></el-input>
                       </el-form-item>
                        <el-form-item label="商品分类" prop="goods_cat">
                                <el-cascader
                                 v-model="value"
                                 :options="paramslist"
                                 :props="{ expandTrigger: 'hover', value:'cat_id' ,label:'cat_name' }"
                                 @change="handleChange" >
                                </el-cascader>
                       </el-form-item>


                </el-tab-pane>
                <el-tab-pane label="商品参数">
                    <!-- 动态参数 -->
                        <el-checkbox
            v-for="(ele, i) in manyarr"
            :key="i"
            :label="ele.name"
            :checked="ele.flag"
            @change="changecheck(ele)"
          ></el-checkbox>
                </el-tab-pane>
                <el-tab-pane label="商品属性">
                    <!-- 静态属性 -->
                    <!-- <div v-for="item in onlytable" :key="item.attr_id">
                        <div>{{ item.attr_name }}</div>
                        <input type="text" :value="item.attr_vals" />
                    </div> -->
                </el-tab-pane>
                <el-tab-pane label="商品图片">
                    <!-- 图片 -->
                     <el-upload
                        class="upload-demo"
                        :action="upUrl"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :headers="headerObj" :on-success="handleSuccess"
                        list-type="picture">
                        <el-button size="small" type="primary">点击上传</el-button>
                     </el-upload>
                </el-tab-pane>
                <el-tab-pane label="商品内容">
                    <!-- 富文本 -->
                       <quill-editor v-model="ruleForm.goods_introduce">
                        </quill-editor>
               </el-tab-pane>
               <el-tab-pane label="添加商品"><el-button type="primary" @click="add">添加商品</el-button></el-tab-pane>
            </el-tabs>
         </el-form>
      </el-card>
           <!-- 图片预览 -->
          <el-dialog title="图片预览" :visible.sync="pictureVisible">
            <img :src="previewpath" alt="" class="picImg" >
          </el-dialog>
    </div>
</template>
<script>
import { addGoods, goodsAdministration, parameterList } from "@/utils/goods";
export default {
  data() {
    return {
        manyarr:[],
      manylist: [],
      flag: true,
      active: 0,
      value: [],
      paramslist: [],
      tabPosition: "left",
      page: {
        type: [1, 2, 3],
        pagenum: 1,
        pagesize: 10
      },
      // 图片框
      pictureVisible: false,
      upUrl: "http://shiyansong.cn:8888/api/private/v1/upload",
      //   可以存储token
      headerObj: {
        Authorization: localStorage.getItem("token")
      },
      // 预览图片路径
      previewpath: "",
      ruleForm: {
        goods_name: "",
        goods_price: "",
        goods_weight: "",
        goods_number: "",
        goods_cat: "",
        pics: []
        //   goods_introduce:'',
      },
      //校验规则
      rules: {
        goods_name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 1, max: 5, message: "长度在1 到 5 个字符", trigger: "blur" }
        ],
        goods_price: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 1, max: 10, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        goods_weight: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 1, max: 10, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        goods_cat: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 1, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        goods_number: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 1, max: 10, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    handleChange(value) {
      this.ruleForm.goods_cat = this.value.join(",");
      if (this.value.length == 3) {
        this.flag = true;
      } else {
        this.flag = false;
      }
      console.log(this.value);
    },
    // 选项卡
    handleClick(activeName, oldActiveName) {
      if (this.flag == false) {
        this.$message({
          type: "error",
          message: "请选择商品分类"
        });
        return false;
      } else {
        this.active = Number(activeName);
      }
      console.log(activeName, oldActiveName);
      if (activeName == 1) {
        let obj = {
          id: this.ruleForm.goods_cat[this.ruleForm.goods_cat.length - 1],
          sel: "many"
        };
        parameterList(obj).then(res => {
          console.log(res, 182);
          this.manylist=res.data.data
          this.manylist.map(item => {
            return {
              attr_vals: item.attr_vals.split(" ") || []
            };
          });
          console.log(this.manylist);
        //   if (this.manylist != []) {
        //     this.manylist.forEach(item => {
        //       item.attr_vals.forEach(ele => {
        //         this.manyarr.push({ name: ele, flag: true });
        //       });
        //     });
        //   }
        });
      }
    },
    // 添加
    add() {
      let obj = {
        ...this.ruleForm
      };
      addGoods(obj).then(res => {
        console.log(res);
        if (res.data.meta.status == 200) {
          this.$message({
            type: "success", // success error warning
            message: res.data.meta.msg
          });
          this.ruleForm = {
            goods_name: "",
            goods_price: "",
            goods_weight: "",
            goods_number: "",
            goods_cat: "",
            goods_introduce: ""
          };
        }
      });
    },
    // 图片删除（离开）
    handleRemove(file) {
      // 点击 查找 点击的路径与我们图片数组里的路径是否相等 如果相等 找出下标 删除掉
      let tmp_path = file.response.data.tmp_path;
      let index = this.ruleForm.pics.findIndex(
        item => item.tmp_path == tmp_path
      );
      this.ruleForm.pics.splice(index, 1);
      console.log(file, 203);
    },
    // 图片预览
    handlePreview(file) {
      console.log(file, 207);
      let url = file.url;
      this.previewpath = url;
      // 点击打开
      this.pictureVisible = true;
    },

    // 监听是否上传成功
    handleSuccess(res) {
      console.log(res, 216);
      let picarr = { pic: res.data.tmp_path };
      this.ruleForm.pics.push(picarr);
    },
    //  动态复选框
    changecheck(ele) {
      console.log(ele);
    }
  },
  mounted() {
    this.flag = false;
  },
  watch: {
    flag: {
      deep: true,
      // immediate: true,
      handler(newVal, oldVal) {
        console.log(newVal);
      }
    }
  },
  created() {
    goodsAdministration(this.page).then(res => {
      if ((res.data.meta.status = 200)) {
        this.paramslist = res.data.data.result;
      }
    });
  }
};
</script>
<style lang="scss" scoped>
//  ::v-deep .el-tabs  el-tabs--left{
//     height: 300px !important;

//    ::v-deep .element.style {
//     height: 400px !important;
// }

// }
.picImg {
  width: 100%;
  //   height: 500px;
}
</style>
